<template>
  <div class="min-h-screen">
    <!-- 英雄区域 -->
    <section class="relative py-20 px-4 sm:px-6 lg:px-8">
      <div class="max-w-7xl mx-auto text-center">
        <h1 class="text-5xl md:text-7xl font-bold mb-6">
          <span class="tech-text">MDN API</span>
          <br>
          <span class="text-white">演示项目</span>
        </h1>
        <p class="text-xl text-gray-300 mb-12 max-w-3xl mx-auto">
          探索现代 Web API 的强大功能，通过交互式演示学习和理解各种浏览器 API 的使用方法
        </p>
        
        <!-- 科技感装饰元素 -->
        <div class="absolute inset-0 overflow-hidden pointer-events-none">
          <div class="absolute top-1/4 left-1/4 w-64 h-64 bg-tech-accent/10 rounded-full blur-3xl"></div>
          <div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-tech-secondary/10 rounded-full blur-3xl"></div>
        </div>
      </div>
    </section>

    <!-- API 演示网格 -->
    <section class="py-16 px-4 sm:px-6 lg:px-8">
      <div class="max-w-7xl mx-auto">
        <h2 class="text-3xl font-bold text-center mb-8 tech-text">
          选择一个 API 开始探索
        </h2>
        
        <!-- 搜索框 -->
        <div class="max-w-3xl mx-auto mb-12">
          <div class="relative group">
            <!-- 背景光晕效果 -->
            <div class="absolute -inset-1 bg-gradient-to-r from-tech-accent/30 via-tech-secondary/30 to-tech-accent/30 rounded-3xl blur-2xl opacity-0 group-focus-within:opacity-100 transition-opacity duration-500"></div>
            
            <div class="relative bg-gradient-to-r from-gray-800/90 to-gray-900/90 backdrop-blur-xl rounded-2xl overflow-hidden shadow-2xl group-focus-within:shadow-tech-accent/20 transition-all duration-300">
              <div class="flex items-center px-6 py-5">
                <div class="pr-4">
                  <i class="i-carbon-search text-gray-500 text-2xl group-focus-within:text-tech-accent transition-colors duration-300"></i>
                </div>
                
                <input
                  v-model="searchQuery"
                  type="text"
                  placeholder="搜索 API..."
                  class="flex-1 bg-transparent border-none text-white placeholder-gray-500 focus:outline-none text-lg font-light tracking-wide"
                  @input="handleSearch"
                >
                
                <transition
                  enter-active-class="transition-all duration-200"
                  enter-from-class="opacity-0 scale-50"
                  enter-to-class="opacity-100 scale-100"
                  leave-active-class="transition-all duration-200"
                  leave-from-class="opacity-100 scale-100"
                  leave-to-class="opacity-0 scale-50"
                >
                  <button
                    v-if="searchQuery"
                    @click="clearSearch"
                    class="ml-2 w-8 h-8 border-none flex items-center justify-center rounded-full bg-gray-700/80 hover:bg-tech-accent/20 text-gray-400 hover:text-tech-accent transition-all duration-200 hover:scale-110 hover:rotate-90"
                    title="清空搜索"
                  >
                    ✕
                  </button>
                </transition>
              </div>
            </div>
          </div>
          
          <!-- 搜索建议标签 -->
          <div v-if="!searchQuery" class="mt-5 flex items-center justify-center gap-2 flex-wrap">
            <span class="text-gray-500 text-sm font-light">试试:</span>
            <button
              v-for="tag in quickSearchTags"
              :key="tag"
              @click="searchQuery = tag"
              class="border-none px-4 py-1.5 bg-gradient-to-r from-gray-800/80 to-gray-900/80 hover:from-tech-accent/20 hover:to-tech-secondary/20 text-gray-400 hover:text-tech-accent text-sm rounded-full transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-tech-accent/30"
            >
              {{ tag }}
            </button>
          </div>
          
          <!-- 搜索统计 -->
          <transition
            enter-active-class="transition-all duration-300"
            enter-from-class="opacity-0 -translate-y-2"
            enter-to-class="opacity-100 translate-y-0"
            leave-active-class="transition-all duration-200"
            leave-from-class="opacity-100 translate-y-0"
            leave-to-class="opacity-0 -translate-y-2"
          >
            <div v-if="searchQuery" class="mt-5 text-center">
              <div class="inline-flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-tech-accent/20 to-tech-secondary/20 rounded-full backdrop-blur-sm shadow-lg">
                <i class="i-carbon-checkmark-filled text-tech-accent text-lg"></i>
                <span class="text-gray-200 text-sm font-light">
                  找到 <span class="text-tech-accent font-bold text-base mx-1">{{ filteredDemos.length }}</span> 个匹配的 API
                </span>
              </div>
            </div>
          </transition>
        </div>
        
        <!-- 无搜索结果提示 -->
        <div v-if="searchQuery && filteredDemos.length === 0" class="text-center py-16">
          <i class="i-carbon-search-locate text-6xl text-gray-600 mb-4 block mx-auto"></i>
          <h3 class="text-xl font-semibold text-white mb-2">未找到匹配的 API</h3>
          <p class="text-gray-400 mb-6">试试其他关键词，例如："音频"、"视频"、"文件"</p>
          <button
            @click="clearSearch"
            class="border-none tech-button"
          >
            <i class="i-carbon-reset mr-2"></i>
            清空搜索
          </button>
        </div>

        <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div
            v-for="demo in filteredDemos"
            :key="demo.name"
            class="tech-card group"
          >
            <div class="flex items-center mb-4">
              <div class="w-12 h-12 bg-gradient-to-r from-tech-accent to-tech-secondary rounded-lg flex items-center justify-center mr-4">
                <i :class="demo.icon" class="text-white text-xl"></i>
              </div>
              <h3 class="text-xl font-semibold text-white group-hover:text-tech-accent transition-colors">
                {{ demo.title }}
              </h3>
            </div>
            
            <p class="text-gray-400 mb-4 leading-relaxed">
              {{ demo.description }}
            </p>
            
            <div class="flex flex-wrap gap-2 mb-4">
              <span
                v-for="tag in demo.tags"
                :key="tag"
                class="px-3 py-1 bg-gray-800 text-gray-300 text-sm rounded-full"
              >
                {{ tag }}
              </span>
            </div>
            
            <div class="flex items-center gap-3 mt-auto pt-4 border-t border-gray-800">
              <router-link
                :to="demo.path"
                class="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-tech-accent/10 hover:bg-tech-accent/20 text-tech-accent rounded-lg transition-all duration-200 hover:scale-105"
              >
                <i class="i-carbon-launch text-sm"></i>
                <span class="text-sm font-medium">查看演示</span>
              </router-link>
              
              <a
                v-if="demo.mdnUrl"
                :href="demo.mdnUrl"
                target="_blank"
                rel="noopener noreferrer"
                class="flex items-center justify-center gap-2 px-4 py-2 bg-gray-800/50 hover:bg-gray-700 text-gray-400 hover:text-white rounded-lg transition-all duration-200 hover:scale-105"
                @click.stop
              >
                <i class="i-carbon-document text-sm"></i>
                <span class="text-sm font-medium">源地址</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 特性介绍 -->
    <section class="py-16 px-4 sm:px-6 lg:px-8 bg-tech-dark/30">
      <div class="max-w-7xl mx-auto">
        <div class="text-center mb-12">
          <h2 class="text-3xl font-bold mb-4 tech-text">项目特性</h2>
          <p class="text-gray-300 max-w-2xl mx-auto">
            使用现代前端技术栈构建，提供最佳的开发和用户体验
          </p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div
            v-for="feature in features"
            :key="feature.title"
            class="text-center"
          >
            <div class="w-16 h-16 bg-gradient-to-r from-tech-accent to-tech-secondary rounded-lg flex items-center justify-center mx-auto mb-4">
              <i :class="feature.icon" class="text-white text-2xl"></i>
            </div>
            <h3 class="text-lg font-semibold text-white mb-2">{{ feature.title }}</h3>
            <p class="text-gray-400 text-sm">{{ feature.description }}</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// 搜索关键词
const searchQuery = ref('')

// 快速搜索标签
const quickSearchTags = ref(['音频', '视频', '文件', '通知', '游戏', '实时', '硬件'])

// API 演示数据
const apiDemos = ref([
  {
    name: 'screen-capture',
    path: '/screen-capture',
    title: '屏幕捕捉 API',
    description: '使用 Screen Capture API 录制屏幕内容，支持整个屏幕、应用窗口或浏览器标签页的捕获。',
    icon: 'i-carbon-screen',
    tags: ['媒体', '录制', '屏幕共享'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/Screen_Capture_API'
  },
  {
    name: 'hid-api',
    path: '/hid-api',
    title: 'HID 协议 API',
    description: '通过 WebHID API 与人机接口设备（如游戏手柄、键盘、鼠标等）进行通信。',
    icon: 'i-carbon-gamepad',
    tags: ['硬件', '设备', '游戏'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/WebHID_API'
  },
  {
    name: 'geolocation',
    path: '/geolocation',
    title: '地理位置 API',
    description: '获取用户的地理位置信息，支持实时位置跟踪和位置变化监听。',
    icon: 'i-carbon-location',
    tags: ['位置', 'GPS', '地图'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation_API'
  },
  {
    name: 'notification',
    path: '/notification',
    title: '通知 API',
    description: '向用户发送桌面通知，支持自定义图标、标题和操作按钮。',
    icon: 'i-carbon-notification',
    tags: ['通知', '消息', '提醒'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/Notifications_API'
  },
  {
    name: 'web-audio',
    path: '/web-audio',
    title: 'Web Audio API',
    description: '强大的音频处理和合成功能，支持音频可视化、音效处理和音乐创作。',
    icon: 'i-carbon-volume-up',
    tags: ['音频', '音乐', '可视化'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API'
  },
  {
    name: 'canvas',
    path: '/canvas',
    title: 'Canvas API',
    description: '2D 图形绘制和动画，支持图像处理、数据可视化和游戏开发。',
    icon: 'i-carbon-draw',
    tags: ['绘图', '动画', '可视化'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API'
  },
  {
    name: 'websocket',
    path: '/websocket',
    title: 'WebSocket API',
    description: '实时双向通信，适用于聊天应用、实时协作和游戏开发。',
    icon: 'i-carbon-connect',
    tags: ['实时', '通信', '网络'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/WebSockets_API'
  },
  {
    name: 'file-api',
    path: '/file-api',
    title: 'File API',
    description: '文件读取、处理和上传功能，支持拖拽上传和文件预览。',
    icon: 'i-carbon-document',
    tags: ['文件', '上传', '处理'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/File_API'
  },
  {
    name: 'web-workers',
    path: '/web-workers',
    title: 'Web Workers API',
    description: '后台线程处理，实现复杂计算而不阻塞主线程，提升应用性能。',
    icon: 'i-carbon-processor',
    tags: ['性能', '多线程', '计算'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API'
  },
  {
    name: 'audio-output',
    path: '/audio-output',
    title: '音频输出设备 API',
    description: '选择和控制音频输出设备，支持多设备切换和音量控制。',
    icon: 'i-carbon-audio-console',
    tags: ['音频', '设备', '输出'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/Audio_Output_Devices_API'
  },
  {
    name: 'badging-api',
    path: '/badging-api',
    title: 'Badging API',
    description: '在应用图标上显示徽章数字，用于通知用户未读消息或待处理任务。',
    icon: 'i-carbon-notification-filled',
    tags: ['徽章', 'PWA', '通知'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/Badging_API'
  },
  {
    name: 'barcode-detection',
    path: '/barcode-detection',
    title: 'Barcode Detection API',
    description: '检测和识别图像中的条形码和二维码，支持多种格式的码识别。',
    icon: 'i-carbon-scan',
    tags: ['扫码', '识别', '检测'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/Barcode_Detection_API'
  },
  {
    name: 'beacon-api',
    path: '/beacon-api',
    title: 'Beacon API',
    description: '可靠地发送少量数据到服务器，即使在页面卸载时也能保证数据传输。',
    icon: 'i-carbon-send-alt',
    tags: ['数据传输', '统计', '可靠'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/Beacon_API'
  },
  {
    name: 'file-system-api',
    path: '/file-system-api',
    title: 'File System Access API',
    description: '访问本地文件系统，读取和写入文件，创建和管理文件夹。',
    icon: 'i-carbon-folder',
    tags: ['文件系统', '读写', '目录'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/File_System_Access_API'
  },
  {
    name: 'fullscreen-api',
    path: '/fullscreen-api',
    title: 'Fullscreen API',
    description: '将元素切换到全屏模式，提供沉浸式的用户体验。',
    icon: 'i-carbon-fit-to-screen',
    tags: ['全屏', '显示', '沉浸式'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/Fullscreen_API'
  },
  {
    name: 'gamepad-api',
    path: '/gamepad-api',
    title: 'Gamepad API',
    description: '连接和使用游戏手柄，访问按钮和摇杆状态，支持振动反馈。',
    icon: 'i-carbon-game-console',
    tags: ['游戏', '手柄', '控制器'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/Gamepad_API'
  },
  {
    name: 'drag-drop-api',
    path: '/drag-drop-api',
    title: 'HTML 拖放 API',
    description: '原生拖放功能，实现元素的拖拽、排序和文件上传。',
    icon: 'i-carbon-drag-vertical',
    tags: ['拖放', '交互', '文件上传'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API'
  },
  {
    name: 'image-capture-api',
    path: '/image-capture-api',
    title: 'MediaStream Image Capture API',
    description: '从摄像头捕获高质量图片，控制变焦、曝光等相机参数。',
    icon: 'i-carbon-camera',
    tags: ['相机', '拍照', '图像捕获'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/MediaStream_Image_Capture_API'
  },
  {
    name: 'indexeddb-api',
    path: '/indexeddb-api',
    title: 'IndexedDB API',
    description: '浏览器端的强大 NoSQL 数据库，支持大量结构化数据存储和查询。',
    icon: 'i-carbon-data-base',
    tags: ['数据库', '存储', '离线'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API'
  },
  {
    name: 'insertable-streams-api',
    path: '/insertable-streams-api',
    title: 'Insertable Streams API',
    description: '对 MediaStreamTrack 进行实时处理和转换，实现视频特效和音频处理。',
    icon: 'i-carbon-flow-stream',
    tags: ['视频处理', '特效', '实时'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/Insertable_Streams_for_MediaStreamTrack_API'
  },
  {
    name: 'media-capabilities-api',
    path: '/media-capabilities-api',
    title: 'Media Capabilities API',
    description: '查询浏览器的媒体解码和编码能力，优化媒体播放体验。',
    icon: 'i-carbon-meter',
    tags: ['媒体', '性能', '检测'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/Media_Capabilities_API'
  },
  {
    name: 'media-source-api',
    path: '/media-source-api',
    title: 'Media Source Extensions API',
    description: '动态构建媒体流，实现自适应流媒体和视频拼接功能。',
    icon: 'i-carbon-playlist',
    tags: ['流媒体', '视频', '拼接'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/Media_Source_Extensions_API'
  },
  {
    name: 'payment-handler-api',
    path: '/payment-handler-api',
    title: 'Payment Handler API',
    description: '创建自定义支付方式，与 Payment Request API 集成。',
    icon: 'i-carbon-wallet',
    tags: ['支付', 'Service Worker', 'PWA'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/Payment_Handler_API'
  },
  {
    name: 'performance-api',
    path: '/performance-api',
    title: 'Performance API',
    description: '测量和分析网页性能，优化用户体验和加载速度。',
    icon: 'i-carbon-dashboard',
    tags: ['性能', '监控', '优化'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/Performance_API'
  },
  {
    name: 'document-pip-api',
    path: '/document-pip-api',
    title: 'Document Picture-in-Picture API',
    description: '创建始终在最上层的浮动窗口，显示任意 HTML 内容。',
    icon: 'i-carbon-popup',
    tags: ['画中画', '浮动窗口', 'PiP'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Picture-in-Picture_API'
  },
  {
    name: 'presentation-api',
    path: '/presentation-api',
    title: 'Presentation API',
    description: '将内容投影到外部显示器、投影仪或无线显示设备。',
    icon: 'i-carbon-presentation-file',
    tags: ['演示', '投影', '多屏'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/Presentation_API'
  },
  {
    name: 'resize-observer-api',
    path: '/resize-observer-api',
    title: 'Resize Observer API',
    description: '监听元素尺寸变化，实现响应式布局和自适应组件。',
    icon: 'i-carbon-arrows-horizontal',
    tags: ['尺寸监听', '响应式', '自适应'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/Resize_Observer_API'
  },
  {
    name: 'wake-lock-api',
    path: '/wake-lock-api',
    title: 'Screen Wake Lock API',
    description: '防止设备屏幕变暗或锁定，保持屏幕常亮。',
    icon: 'i-carbon-sun',
    tags: ['屏幕常亮', '唤醒锁', '省电'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/Screen_Wake_Lock_API'
  },
  {
    name: 'selection-api',
    path: '/selection-api',
    title: 'Selection API',
    description: '操作和管理用户文本选择，实现高级文本交互功能。',
    icon: 'i-carbon-text-selection',
    tags: ['文本选择', '富文本编辑', '高亮标注'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/Selection'
  },
  {
    name: 'view-transitions-api',
    path: '/view-transitions-api',
    title: 'View Transitions API',
    description: '创建平滑的页面过渡动画，提升用户体验。',
    icon: 'i-carbon-movement',
    tags: ['视图过渡', '动画效果', '用户体验'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/View_Transitions_API'
  },
  {
    name: 'web-animations-api',
    path: '/web-animations-api',
    title: 'Web Animations API',
    description: '使用 JavaScript 精确控制复杂动画，实现流畅的交互效果。',
    icon: 'i-carbon-animation',
    tags: ['动画控制', '关键帧', '缓动函数'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Animations_API'
  },
  {
    name: 'web-midi-api',
    path: '/web-midi-api',
    title: 'Web MIDI API',
    description: '连接和控制 MIDI 设备，实现音乐创作和演奏功能。',
    icon: 'i-carbon-piano',
    tags: ['MIDI设备', '音乐创作', '乐器控制'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/Web_MIDI_API'
  },
  {
    name: 'web-speech-api',
    path: '/web-speech-api',
    title: 'Web Speech API',
    description: '语音合成（文本转语音）和语音识别（语音转文本）功能。',
    icon: 'i-carbon-microphone',
    tags: ['语音合成', '语音识别', '语音助手'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Speech_API'
  },
  {
    name: 'webcodecs-api',
    path: '/webcodecs-api',
    title: 'WebCodecs API',
    description: '高性能音视频编解码，实现低延迟的媒体处理。',
    icon: 'i-carbon-video',
    tags: ['视频编码', '音频编码', '媒体处理'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/WebCodecs_API'
  },
  {
    name: 'webrtc-api',
    path: '/webrtc-api',
    title: 'WebRTC API',
    description: '实时音视频通信、数据传输和点对点连接。',
    icon: 'i-carbon-network-3',
    tags: ['视频通话', '实时通信', '点对点'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API'
  },
  {
    name: 'webusb-api',
    path: '/webusb-api',
    title: 'WebUSB API',
    description: '直接访问 USB 设备，实现硬件交互和控制。',
    icon: 'i-carbon-usb',
    tags: ['USB设备', '硬件控制', '设备通信'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/WebUSB_API'
  },
  {
    name: 'webvtt-api',
    path: '/webvtt-api',
    title: 'WebVTT API',
    description: 'Web 视频文本轨道格式，用于字幕和标题。',
    icon: 'i-carbon-text-annotation-toggle',
    tags: ['字幕', '视频', '文本轨道'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/WebVTT_API'
  },
  {
    name: 'window-management-api',
    path: '/window-management-api',
    title: 'Window Management API',
    description: '多屏幕窗口管理，精确控制窗口位置。',
    icon: 'i-carbon-application',
    tags: ['多屏幕', '窗口管理', '显示器'],
    mdnUrl: 'https://developer.mozilla.org/zh-CN/docs/Web/API/Window_Management_API'
  }
])

// 项目特性
const features = ref([
  {
    title: 'Vue 3',
    description: '最新的 Vue.js 框架，提供组合式 API 和更好的性能',
    icon: 'i-carbon-logo-vue'
  },
  {
    title: 'UnoCSS',
    description: '原子化 CSS 引擎，快速构建现代化的用户界面',
    icon: 'i-carbon-color-palette'
  },
  {
    title: 'TypeScript',
    description: '类型安全的 JavaScript，提供更好的开发体验',
    icon: 'i-carbon-code'
  },
  {
    title: 'Vite',
    description: '极速的构建工具，提供快速的开发和构建体验',
    icon: 'i-carbon-flash'
  }
])

// 过滤后的 API 列表
const filteredDemos = computed(() => {
  if (!searchQuery.value.trim()) {
    return apiDemos.value
  }
  
  const query = searchQuery.value.toLowerCase().trim()
  
  return apiDemos.value.filter(demo => {
    // 搜索标题
    if (demo.title.toLowerCase().includes(query)) {
      return true
    }
    
    // 搜索描述
    if (demo.description.toLowerCase().includes(query)) {
      return true
    }
    
    // 搜索标签
    if (demo.tags.some(tag => tag.toLowerCase().includes(query))) {
      return true
    }
    
    return false
  })
})

// 处理搜索输入
const handleSearch = () => {
  // 可以在这里添加防抖逻辑或其他处理
}

// 清空搜索
const clearSearch = () => {
  searchQuery.value = ''
}
</script>
